<template>
  <view>
    <view style="width: 100%"></view>
    <view class="footerNav">
      <view class="footerIcon">
        <view v-for="v in navList" :key="v.key" class="item" @click="goPage(v)">
          <image
            v-if="v.key === 3"
            src="/static/imgs/tabbar/service.png"
            mode=""
            class="service-icon"
          ></image>
          <image
            v-else
            :src="`/static/imgs/tabbar/${v.key}-1.png`"
            mode=""
            class="item-icon"
          ></image>
          <view
            :class="modelKey === v.key ? 'atvtit' : 'tit'"
            v-if="v.key !== 3"
          >
            {{ $t(v.name) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          key: 1,
          text: "首页",
          name: "home.tab0",
          path: "/pages/index/index",
        },
        {
          key: 2,
          text: "自选",
          name: "home.tab1",
          path: "/pages/category/index",
        },
        {
          key: 3,
          text: "客服",
          name: "home.tab4",
          path: "/pages/customerService/index",
        },
        {
          key: 4,
          text: "发现",
          name: "home.tab2",
          path: "/pages/article/index",
        },
        {
          key: 5,
          text: "我的",
          name: "home.tab3",
          path: "/pages/user/index",
        },
      ],
    };
  },
  props: {
    modelKey: {
      type: Number,
      // required: true,
    },
  },
  computed: {},
  methods: {
    goPage(v) {
      if (v.key === this.modelKey) return;
      this.$Router.push(v.path);
      // uni.navigateTo({
      //   url: v.path,
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.footerNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  // height: 148rpx;
  background: #ffffff;
  padding: 0 40rpx 0;
  z-index: 9;
  margin: 0 auto;
  box-shadow: 0px -8px 8px 0px #f8fafc;
  border-top: 1px solid #eee;
  .footerIcon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .service-icon {
        width: 110rpx;
        height: 110rpx;
        position: relative;
        top: -18px;
      }
      .tit {
        margin-top: 8rpx;
        font-size: 17rpx;
        color: #666666;
      }
      .atvtit {
        margin-top: 8rpx;
        font-size: 17rpx;
        color: #f34345;
      }
    }
  }
}
</style>
